<template>
  <div id="tmpl">
    <ul class="mui-table-view">
      <li v-for="item in list"  class="mui-table-view-cell mui-media">
        <router-link v-bind="{to:'/news/newsinfo/' +item.id}" >
          <img class="mui-media-object mui-pull-left" :src="item.img_url">
          <div class="mui-media-body">
            {{item.title}}
            <p class="mui-ellipsis" v-text="item.zhaiyao"></p>
            <div class="ft">
              <span>发表时间:{{item.add_time | datefmt("YYYY-MM-DD HH:mm:ss") }}</span>
              <span>点击数:{{item.click}}</span>
            </div>
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
  import common from "../../kits/common"

  export default {
    data () {
      return {
        list: []
      }
    },
    created(){
      this.getNewsList()
    },
    methods: {
      getNewsList(){
        var url = common.domianapi + "/api/getnewslist"
        this.$http.get(url).then(function (info) {

          if (info.body.status != 0) {
            Toast(info.body.message);
          }

          this.list = info.body.message
        })
      }
    }

  }
</script>

<style scoped>
  .mui-table-view .mui-media-object {
    max-width: 80px;
    line-height: 80px;
  }
  .mui-table-view img{
    width: 80px;
    height: 80px;
  }

  .ft {
    margin-top:1.5em;
    font-size: 14px;
    color: #0094ff;
  }
  .ft span:last-child {
    margin-left:20px;
  }
</style>
